<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>小A生活说</title>
    <link rel="shortcut icon" type="image/x-icon" href="favicon.ico">
    <link rel="stylesheet" href="css/index.css">
    <!-- 引入重置样式表 -->
    <!-- <link rel="stylesheet" href="./css.css"> -->
    <!-- 引入css样式表 -->
    <link rel="stylesheet" href="./style.css">
    <!-- 引入图标字体库 -->
    <link rel="stylesheet" href="./fontawesome/css/all.css">
    <!-- 引入封装的ajax函数 -->
    <script src="./ajax.js"></script>
    <!-- 引入js -->
    <script src="./js.js"></script>
    <!-- <script src="./link.js"></script> -->
</head>

<body>
    <div class="wrapper">

        <!-- 登录界面 -->
        <div class="logging ">
            <button class="closebtn1" style="position:fixed;top:0%;right:0%;transform:translate(-50%,50%); background-color: rgb(219, 26, 26);font-size:25px;text-align: center; border-radius: 50%; width: 25px;height: 25px;">×</button>
            <h1 class="ti">欢迎登录</h1>
            <!-- 登录标题 -->
            <!-- <div class="logo">登录</div> -->
            <!-- 用户名框 -->
            <div class="phonenum">
                <div class="user"><i class="fas fa-user-circle"></i></div>
                <input id="username" type="text" placeholder="用户名" autocomplete='on'>
            </div>
            <!-- 密码框 -->
            <div class="phonenum">
                <div class="user"><i class="fas fa-lock"></i></div>
                <input id="password" type="password" placeholder="密码" autocomplete='on'>
            </div>
            <!-- 翻转按钮 -->
            <div class="tran">没有账号，注册</div>
            <!-- 登录按钮 -->
            <div id="submit" class="submit">登录</div>
            <span> <label class="left1">
                <input type="checkbox" id="remember">
                记住密码
            </label>
            <label class="right55">
                <input type="checkbox" >
                七天免登录
            </label></span>
        </div>

        <!-- 注册界面 -->
        <div class="logging p hidden" action="">
            <button id="closebtn2" style="position:fixed;top:0%;right:0%;transform:translate(-50%,50%); background-color: rgb(219, 26, 26);font-size:25px;text-align: center; border-radius: 50%; width: 25px;height: 25px;">×</button>
            <!-- 注册标题 -->
            <h1 class="ti1">注册</h1>
            <!-- 用户名框 -->
            <div class="phonenum" style="margin: 10px auto;">
                <div class="user"><i class="fas fa-user-circle"></i></div>
                <input id="username_1" type="text" placeholder="用户名" autocomplete='off'>
            </div>
            <!-- 密码框 -->
            <div class="phonenum" style="margin: 10px auto;">
                <div class="user"><i class="fas fa-lock"></i></div>
                <input id="password_1" type="password" placeholder="密码">
            </div>
            <!-- 姓名框 -->
            <div class="phonenum" style="margin: 10px auto;">
                <div class="user"><i class="fas fa-id-card"></i></div>
                <input id="name_1" type="text" placeholder="姓名" autocomplete='off'>
            </div>
            <!-- 电话号码框 -->
            <div class="phonenum" style="margin: 10px auto;">
                <div class="user"><i class="fas fa-phone"></i></div>
                <input id="phone_1" type="text" placeholder="电话号码" autocomplete='off'>
                <!-- 判断电话号码符不符合格式框 -->
                <p id="info"></p>
            </div>
            <span id="ti2"></span>
            <!-- 翻转按钮 -->
            <div class="tran">已有账号，登录</div>
            <!-- 注册按钮 -->
            <div id="submit_1" class="submit" style="position: relative;top: 5px;bottom:10px;">注册</div>
        </div>
    </div>
    </div>
    <!-- 记住用户名 -->
    <script>
        var username = document.querySelector('#username');
        var password = document.querySelector('#password');
        var remember = document.querySelector('#remember');
        if (localStorage.getItem('username')) {
            username.value = localStorage.getItem('username');
            remember.checked = true;

        }
        if (localStorage.getItem('password')) {
            password.value = localStorage.getItem('password');
            remember.checked = true;

        }
        remember.addEventListener('change', function() {
            if (this.checked) {
                localStorage.setItem('username', username.value);
                localStorage.setItem('password', password.value);
            } else {
                localStorage.removeItem('username');
                localStorage.removeItem('password');
            }
        })
    </script>
    <div class="bigbox">
        <header class="header">
            <div class="container clearfix">
                <div class="logo left">
                    <h1>
                        <a href="">
                        </a>
                    </h1>
                </div>
                <div class="search left">
                    <form>
                        <input type="text" class="txt" placeholder="电影、书籍、音乐">
                        <button>
                        <i class="iconfont iconxiazai17"></i>
                    </button>
                    </form>
                </div>
                <nav class="menu  ">
                    <button class="menu-read" id="submit33"> <span>查看所有动态</span> </button>
                    <button class="menu-movie"> <span>搜索动态</span> </button>
                    <button class="menu-music"> <span>个人主页</span> </button>
                    <button class="menu-group"> <span>个人相册</span> </button>
                </nav>
            </div>
        </header>

        <div class="banner">
            <div class="container1 clearfix">
                <div class="loginarea ">
                    <h1 class="zi4">欢迎注册登录<br>加入我们</h1>
                    <button class="loginbtn">登录以及注册</button>
                </div>
                <div class="loginarea1 ">
                    <h1 class="zi8">用户信息</h1>
                    <div class="mes">

                    </div>
                    <div class="picbox">

                        <h2>头像区</h2>
                    </div>
                    <button class="changepw"> 修改密码</button><br>
                    <button class="portrait">上传头像</button>
                    <button class="back">点我返回首页</button>
                </div>
                <!-- 内联框架 -->
                <!-- <iframe class="right loginarea" src="loginframe.html" frameborder="0"></iframe> -->
                <div class="slogan right">
                    <h1 class="title">
                        小A生活说
                        <span>1.0</span>
                    </h1>
                    <div class="download">
                        <button class="btn">下载小A生活说 App</button>
                        <div class="qrcode">
                            <img src="img/icon-qr-small.png" alt="">
                            <div class="qrcode-img1 ">
                                <img src="img/qrcode.png" alt="">
                                <p>
                                    iOS / Android 扫码直接下载
                                </p>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="content">


            <h1 class="oo1">用户动态</h1>

            <button id="submit2">点我上传数据</button><br>
            <button id="submit4">我也要发布动态</button>



            <!-- 有多少人就有多少行，根据数组长度动态生成节点 -->
            <div id="demo">

            </div>
            <!-- 展示用户详情 -->
            <div class="content1">
                <div id="demo1">

                </div>
            </div>
            <!-- <script type="text/javascript" src="link.js"></script> -->
            <script type="text/javascript" src="ajax.js"></script>

        </div>
        <div class="smallbox">
            <!-- 主区域样式 -->
            <div>
                <!-- 热点 -->
                <div class="section">
                    <div class="container clearfix">
                        <div class="aside-right">
                            <div class="adv">
                                <a href="">
                                    <img src="./img/adv1.jpg" alt="">
                                </a>
                            </div>
                            <div class="section-title">
                                <h2 class="title">热门话题</h2>
                                <span class="link">
                            <a href="">
                                去话题广场
                            </a>
                        </span>

                            </div>
                            <ul class="hot-list">
                                <li>
                                    <div class="title">
                                        <a href="" class="adv-tag">文学作品中最深刻的孤独描写
                                </a>
                                    </div>
                                    <div class="desc">
                                        <span>379728人浏览</span>
                                        <span>新话题</span>
                                    </div>
                                </li>
                                <li>
                                    <div class="title">
                                        <a href="">文学作品中最深刻的孤独描写</a>
                                    </div>
                                    <div class="desc">
                                        <span>379728人浏览</span>
                                        <span>新话题</span>
                                    </div>
                                </li>
                                <li>
                                    <div class="title">
                                        <a href="">文学作品中最深刻的孤独描写</a>
                                    </div>
                                    <div class="desc">
                                        <span>379728人浏览</span>
                                        <span>新话题</span>
                                    </div>
                                </li>
                                <li>
                                    <div class="title">
                                        <a href="">文学作品中最深刻的孤独描写</a>
                                    </div>
                                    <div class="desc">
                                        <span>379728人浏览</span>
                                        <span>新话题</span>
                                    </div>
                                </li>
                                <li>
                                    <div class="title">
                                        <a href="">文学作品中最深刻的孤独描写</a>
                                    </div>
                                    <div class="desc">
                                        <span>379728人浏览</span>
                                        <span>新话题</span>
                                    </div>
                                </li>
                                <li>
                                    <div class="title">
                                        <a href="">文学作品中最深刻的孤独描写</a>
                                    </div>
                                    <div class="desc">
                                        <span>379728人浏览</span>
                                        <span>新话题</span>
                                    </div>
                                </li>
                            </ul>
                        </div>
                        <div class="main">
                            <div class="section-title">
                                <h2 class="title">热点内容</h2>
                                <span class="link">
                            <a href="">
                                更多
                            </a>
                        </span>

                            </div>
                            <div class="hot-main clearfix">
                                <div class="left">
                                    <ul class=" item-list">
                                        <li>
                                            <div class="img">
                                                <a href="">
                                                    <img src="img/cover1.webp" alt="">
                                                </a>
                                            </div>
                                            <div class="words">
                                                <a href="">
                                            Loremasdas asdfa sdfasdfasdfasdfasdfasdfa
                                        </a>
                                                <span>
                                            76张照片
                                        </span>
                                            </div>
                                        </li>
                                        <li>
                                            <div class="img">
                                                <a href="">
                                                    <img src="img/cover1.webp" alt="">
                                                </a>
                                            </div>
                                            <div class="words">
                                                <a href="">
                                            我们仍未知道那天所看见的论文的意义
                                        </a>
                                                <span>
                                            76张照片
                                        </span>
                                            </div>
                                        </li>
                                        <li>
                                            <div class="img">
                                                <a href="">
                                                    <img src="img/cover1.webp" alt="">
                                                </a>
                                            </div>
                                            <div class="words">
                                                <a href="">
                                            我们仍未知道那天所看见的论文的意义
                                        </a>
                                                <span>
                                            76张照片
                                        </span>
                                            </div>
                                        </li>
                                        <li>
                                            <div class="img">
                                                <a href="">
                                                    <img src="img/cover1.webp" alt="">
                                                </a>
                                            </div>
                                            <div class="words">
                                                <a href="">
                                            我们仍未知道那天所看见的论文的意义
                                        </a>
                                                <span>
                                            76张照片
                                        </span>
                                            </div>
                                        </li>
                                    </ul>
                                </div>
                                <div class="right">
                                    <ul>
                                        <li>
                                            <a href="">城市失忆症</a>
                                            <div class="title">
                                                泼萝的日记
                                            </div>
                                            <div class="desc">
                                                1. “我回到我的城市，熟悉如眼泪，如静脉，如童年的腮腺炎。” 1930年冬天的曼德...
                                            </div>
                                        </li>
                                        <li><a href="">Lorem ipsum dolor sit.</a></li>
                                        <li><a href="">Culpa praesentium hic laboriosam?</a></li>
                                        <li><a href="">Aliquid iusto excepturi fugit.</a></li>
                                        <li><a href="">Eveniet impedit veritatis vitae.</a></li>
                                        <li><a href="">Esse pariatur ipsum dicta?</a></li>
                                        <li><a href="">Soluta et autem magnam.</a></li>
                                        <li><a href="">Officia qui culpa excepturi.</a></li>
                                        <li><a href="">Officiis nihil corporis accusamus?</a></li>
                                        <li><a href="">Officia nobis sequi error.</a></li>
                                        <li><a href="">Cupiditate eius consequatur harum!</a></li>
                                    </ul>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>

                <!-- 豆瓣时间 -->
                <div class="section">
                    <div class="container clearfix">
                        <div class="aside-left">
                            <h2 class="title">
                                <a href="" class="dark-color">豆瓣时间</a>
                            </h2>
                        </div>
                        <div class="main">
                            <div class="section-title">
                                <h2 class="title">热门专栏</h2>
                                <span class="link">
                            <a href="">
                                更多
                            </a>
                        </span>
                            </div>
                            <div class="time-main">
                                <ul class="item-list">
                                    <li>
                                        <div class="img">
                                            <a href="">
                                                <img src="img/cover2.jpg" alt="">
                                            </a>
                                        </div>
                                        <div class="words">
                                            <a href="">
                                        好莱坞人像布光课——美恐摄影大师教你立刻出师
                                    </a>
                                            <span>
                                        视频专栏
                                    </span>
                                        </div>
                                    </li>
                                    <li>
                                        <div class="img">
                                            <a href="">
                                                <img src="img/cover2.jpg" alt="">
                                            </a>
                                        </div>
                                        <div class="words">
                                            <a href="">
                                        好莱坞人像布光课——美恐摄影大师教你立刻出师
                                    </a>
                                            <span>
                                        视频专栏
                                    </span>
                                        </div>
                                    </li>
                                    <li>
                                        <div class="img">
                                            <a href="">
                                                <img src="img/cover2.jpg" alt="">
                                            </a>
                                        </div>
                                        <div class="words">
                                            <a href="">
                                        好莱坞人像布光课——美恐摄影大师教你立刻出师
                                    </a>
                                            <span>
                                        视频专栏
                                    </span>
                                        </div>
                                    </li>
                                    <li>
                                        <div class="img">
                                            <a href="">
                                                <img src="img/cover2.jpg" alt="">
                                            </a>
                                        </div>
                                        <div class="words">
                                            <a href="">
                                        好莱坞人像布光课——美恐摄影大师教你立刻出师
                                    </a>
                                            <span>
                                        视频专栏
                                    </span>
                                        </div>
                                    </li>
                                    <li>
                                        <div class="img">
                                            <a href="">
                                                <img src="img/cover2.jpg" alt="">
                                            </a>
                                        </div>
                                        <div class="words">
                                            <a href="">
                                        好莱坞人像布光课——美恐摄影大师教你立刻出师
                                    </a>
                                            <span>
                                        视频专栏
                                    </span>
                                        </div>
                                    </li>
                                    <li>
                                        <div class="img">
                                            <a href="">
                                                <img src="img/cover2.jpg" alt="">
                                            </a>
                                        </div>
                                        <div class="words">
                                            <a href="">
                                        好莱坞人像布光课——美恐摄影大师教你立刻出师
                                    </a>
                                            <span>
                                        视频专栏
                                    </span>
                                        </div>
                                    </li>
                                    <li>
                                        <div class="img">
                                            <a href="">
                                                <img src="img/cover2.jpg" alt="">
                                            </a>
                                        </div>
                                        <div class="words">
                                            <a href="">
                                        好莱坞人像布光课——美恐摄影大师教你立刻出师
                                    </a>
                                            <span>
                                        视频专栏
                                    </span>
                                        </div>
                                    </li>
                                    <li>
                                        <div class="img">
                                            <a href="">
                                                <img src="img/cover2.jpg" alt="">
                                            </a>
                                        </div>
                                        <div class="words">
                                            <a href="">
                                        好莱坞人像布光课——美恐摄影大师教你立刻出师
                                    </a>
                                            <span>
                                        视频专栏
                                    </span>
                                        </div>
                                    </li>
                                    <li>
                                        <div class="img">
                                            <a href="">
                                                <img src="img/cover2.jpg" alt="">
                                            </a>
                                        </div>
                                        <div class="words">
                                            <a href="">
                                        好莱坞人像布光课——美恐摄影大师教你立刻出师
                                    </a>
                                            <span>
                                        视频专栏
                                    </span>
                                        </div>
                                    </li>
                                    <li>
                                        <div class="img">
                                            <a href="">
                                                <img src="img/cover2.jpg" alt="">
                                            </a>
                                        </div>
                                        <div class="words">
                                            <a href="">
                                        好莱坞人像布光课——美恐摄影大师教你立刻出师
                                    </a>
                                            <span>
                                        视频专栏
                                    </span>
                                        </div>
                                    </li>
                                </ul>
                            </div>
                        </div>
                    </div>

                </div>

                <!-- 视频 -->
                <div class="section">
                    <div class="container clearfix">
                        <div class="aside-left">
                            <div class="title">
                                <h2>
                                    <a href="" class="dark-color">视频</a>
                                </h2>
                            </div>
                        </div>
                        <div class="main video-main">
                            <div class="section-title">
                                <a href="">
                                    <h2 class="title">
                                        瓣嘴
                                    </h2>
                                </a>
                            </div>

                            <ul class="item-list">
                                <li>
                                    <a href="">
                                        <div class="img iconfont iconbofang">

                                            <img src="img/cover3.jpg" alt="">

                                        </div>
                                    </a>
                                    <div class="words">
                                        <a href="">马伊琍衣品遭围攻吐槽，清奇脑回路解读流行语</a>
                                    </div>
                                </li>
                                <li>
                                    <a href="">
                                        <div class="img iconfont iconbofang">

                                            <img src="img/cover3.jpg" alt="">

                                        </div>
                                    </a>
                                    <div class="words">
                                        <a href="">马伊琍衣品遭围攻吐槽，清奇脑回路解读流行语</a>
                                    </div>
                                </li>
                                <li>
                                    <a href="">
                                        <div class="img iconfont iconbofang">

                                            <img src="img/cover3.jpg" alt="">

                                        </div>
                                    </a>
                                    <div class="words">
                                        <a href="">马伊琍衣品遭围攻吐槽，清奇脑回路解读流行语</a>
                                    </div>
                                </li>
                            </ul>

                            <div class="section-title">
                                <a href="">
                                    <h2 class="title">观影会客厅</h2>
                                </a>
                            </div>
                            <ul class="item-list">
                                <li>
                                    <a href="">
                                        <div class="img iconfont iconbofang">

                                            <img src="img/cover3.jpg" alt="">

                                        </div>
                                    </a>
                                    <div class="words">
                                        <a href="">马伊琍衣品遭围攻吐槽，清奇脑回路解读流行语</a>
                                    </div>
                                </li>
                                <li>
                                    <a href="">
                                        <div class="img iconfont iconbofang">

                                            <img src="img/cover3.jpg" alt="">

                                        </div>
                                    </a>
                                    <div class="words">
                                        <a href="">马伊琍衣品遭围攻吐槽，清奇脑回路解读流行语</a>
                                    </div>
                                </li>
                                <li>
                                    <a href="">
                                        <div class="img iconfont iconbofang">

                                            <img src="img/cover3.jpg" alt="">

                                        </div>
                                    </a>
                                    <div class="words">
                                        <a href="">马伊琍衣品遭围攻吐槽，清奇脑回路解读流行语</a>
                                    </div>
                                </li>
                            </ul>
                        </div>
                    </div>
                </div>

                <!-- 电影 -->
                <div class="section">
                    <div class="container clearfix movie-area">
                        <div class="aside-left">
                            <div class="title">
                                <h2>
                                    <a href="">电影</a>
                                </h2>
                            </div>

                            <nav class="left-menu">
                                <ul>
                                    <li><a href="">影讯&购票</a></li>
                                    <li><a href="" class="new">选电影</a></li>
                                    <li><a href="">Eum.</a></li>
                                    <li><a href="">Voluptatibus?</a></li>
                                    <li><a href="" class="new">Commodi.</a></li>
                                    <li><a href="">Facere!</a></li>
                                    <li><a href="">Est!</a></li>
                                    <li><a href="">Suscipit.</a></li>
                                    <li><a href="">A.</a></li>
                                    <li><a href="">Libero.</a></li>
                                    <li><a href="">Dolore.</a></li>
                                </ul>
                            </nav>
                        </div>
                        <div class="aside-right">
                            <div class="section-title">
                                <h2 class="title">影片分类</h2>
                                <span class="link">
                            <a href="">
                                更多
                            </a>
                        </span>
                            </div>

                            <ul class="right-menu-list clearfix">
                                <li><a href="">爱情</a></li>
                                <li><a href="">喜剧</a></li>
                                <li><a href="">剧情</a></li>
                                <li><a href="">Lorem.</a></li>
                                <li><a href="">Cumque.</a></li>
                                <li><a href="">Velit.</a></li>
                                <li><a href="">Perspiciatis?</a></li>
                                <li><a href="">Eos.</a></li>
                                <li><a href="">Quidem.</a></li>
                                <li><a href="">Assumenda.</a></li>
                                <li><a href="">Soluta.</a></li>
                                <li><a href="">Voluptate?</a></li>
                                <li><a href="">Alias.</a></li>
                            </ul>

                            <div class="section-title">
                                <h2 class="title">近期热门</h2>
                                <span class="link">
                            <a href="">
                                更多
                            </a>
                        </span>
                            </div>

                            <ul class="order-movie-list">
                                <li>
                                    <a href="">风中有朵雨做的云</a>
                                </li>
                                <li>
                                    <a href="">飞驰人生</a>
                                </li>
                                <li><a href="">Lorem, ipsum dolor.</a></li>
                                <li><a href="">Saepe, repellat pariatur!</a></li>
                                <li><a href="">Voluptate, perferendis enim.</a></li>
                                <li><a href="">Rem, qui officiis!</a></li>
                                <li><a href="">Sit, numquam mollitia.</a></li>
                                <li><a href="">Quisquam, aperiam id.</a></li>
                                <li><a href="">Laboriosam, consectetur cupiditate.</a></li>
                                <li><a href="">Maiores, fugiat vel!</a></li>
                            </ul>
                        </div>
                        <div class="main">
                            <div class="section-title">
                                <h2 class="title">正在热映</h2>
                                <span class="link">
                            <a href="">
                                更多
                            </a>
                        </span>
                            </div>

                            <div>
                                <ul class="item-list">
                                    <li>
                                        <div class="img">
                                            <a href="">
                                                <img src="img/cover5.webp" alt="">
                                            </a>
                                        </div>
                                        <div class="words">
                                            <a href="">阿拉丁阿拉丁阿拉丁阿拉丁</a>
                                        </div>
                                        <div class="star">
                                            <span class="star-bg star50"></span>
                                            <span class="number">
                                        8.9
                                    </span>
                                        </div>
                                        <div class="func">
                                            <a href="" class="block-link">选座购票</a>
                                        </div>
                                    </li>
                                    <li>
                                        <div class="img">
                                            <a href="">
                                                <img src="img/cover5.webp" alt="">
                                            </a>
                                        </div>
                                        <div class="words">
                                            <a href="">阿拉丁阿拉丁阿拉丁阿拉丁</a>
                                        </div>
                                        <div class="star">
                                            <span class="star-bg star50"></span>
                                            <span class="number">
                                        8.9
                                    </span>
                                        </div>
                                        <div class="func">
                                            <a href="" class="block-link">选座购票</a>
                                        </div>
                                    </li>
                                    <li>
                                        <div class="img">
                                            <a href="">
                                                <img src="img/cover5.webp" alt="">
                                            </a>
                                        </div>
                                        <div class="words">
                                            <a href="">阿拉丁阿拉丁阿拉丁阿拉丁</a>
                                        </div>
                                        <div class="star">
                                            <span class="star-bg star50"></span>
                                            <span class="number">
                                        8.9
                                    </span>
                                        </div>
                                        <div class="func">
                                            <a href="" class="block-link">选座购票</a>
                                        </div>
                                    </li>
                                    <li>
                                        <div class="img">
                                            <a href="">
                                                <img src="img/cover5.webp" alt="">
                                            </a>
                                        </div>
                                        <div class="words">
                                            <a href="">阿拉丁阿拉丁阿拉丁阿拉丁</a>
                                        </div>
                                        <div class="star">
                                            <span class="star-bg star50"></span>
                                            <span class="number">
                                        8.9
                                    </span>
                                        </div>
                                        <div class="func">
                                            <a href="" class="block-link">选座购票</a>
                                        </div>
                                    </li>
                                    <li>
                                        <div class="img">
                                            <a href="">
                                                <img src="img/cover5.webp" alt="">
                                            </a>
                                        </div>
                                        <div class="words">
                                            <a href="">阿拉丁阿拉丁阿拉丁阿拉丁</a>
                                        </div>
                                        <div class="star">
                                            <span class="star-bg star50"></span>
                                            <span class="number">
                                        8.9
                                    </span>
                                        </div>
                                        <div class="func">
                                            <a href="" class="block-link">选座购票</a>
                                        </div>
                                    </li>
                                    <li>
                                        <div class="img">
                                            <a href="">
                                                <img src="img/cover5.webp" alt="">
                                            </a>
                                        </div>
                                        <div class="words">
                                            <a href="">阿拉丁阿拉丁阿拉丁阿拉丁</a>
                                        </div>
                                        <div class="star">
                                            <span class="star-bg star50"></span>
                                            <span class="number">
                                        8.9
                                    </span>
                                        </div>
                                        <div class="func">
                                            <a href="" class="block-link">选座购票</a>
                                        </div>
                                    </li>
                                    <li>
                                        <div class="img">
                                            <a href="">
                                                <img src="img/cover5.webp" alt="">
                                            </a>
                                        </div>
                                        <div class="words">
                                            <a href="">阿拉丁阿拉丁阿拉丁阿拉丁</a>
                                        </div>
                                        <div class="star">
                                            <span class="star-bg star50"></span>
                                            <span class="number">
                                        8.9
                                    </span>
                                        </div>
                                        <div class="func">
                                            <a href="" class="block-link">选座购票</a>
                                        </div>
                                    </li>
                                    <li>
                                        <div class="img">
                                            <a href="">
                                                <img src="img/cover5.webp" alt="">
                                            </a>
                                        </div>
                                        <div class="words">
                                            <a href="">阿拉丁阿拉丁阿拉丁阿拉丁</a>
                                        </div>
                                        <div class="star">
                                            <span class="star-bg star50"></span>
                                            <span class="number">
                                        8.9
                                    </span>
                                        </div>
                                        <div class="func">
                                            <a href="" class="block-link">选座购票</a>
                                        </div>
                                    </li>
                                </ul>
                            </div>
                        </div>
                    </div>
                </div>

                <!-- 小组 -->
                <div class="section">
                    <div class="container group-area clearfix">
                        <div class="aside-left">
                            <div class="title">
                                <h2>
                                    <a href="">小组</a>
                                </h2>
                            </div>

                            <nav class="left-menu">
                                <ul>
                                    <li><a href="">精选</a></li>
                                    <li><a href="" class="new">文化</a></li>
                                    <li><a href="">行摄</a></li>
                                    <li><a href="">Voluptatibus?</a></li>
                                    <li><a href="" class="new">Commodi.</a></li>
                                    <li><a href="">Facere!</a></li>
                                    <li><a href="">Est!</a></li>
                                    <li><a href="">Suscipit.</a></li>
                                    <li><a href="">A.</a></li>
                                    <li><a href="">Libero.</a></li>
                                    <li><a href="">Dolore.</a></li>
                                </ul>
                            </nav>
                        </div>

                        <div class="aside-right">
                            <div class="section-title">
                                <h2 class="title">小组分类</h2>
                            </div>

                            <div class="group">
                                <div class="group-name">
                                    <a href="">兴趣</a>
                                </div>
                                <ul class="right-menu-list clearfix">
                                    <li><a href="">旅行</a></li>
                                    <li><a href="">摄影</a></li>
                                    <li><a href="">影视</a></li>
                                    <li><a href="">Lorem.</a></li>
                                    <li><a href="">Cumque.</a></li>
                                    <li><a href="">Velit.</a></li>
                                    <li><a href="">Perspiciatis?</a></li>
                                    <li><a href="">Eos.</a></li>
                                    <li><a href="">Quidem.</a></li>
                                    <li><a href="">Assumenda.</a></li>
                                    <li><a href="">Soluta.</a></li>
                                    <li><a href="">Voluptate?</a></li>
                                    <li><a href="">Alias.</a></li>
                                </ul>
                            </div>
                            <div class="group">
                                <div class="group-name">
                                    <a href="">兴趣</a>
                                </div>
                                <ul class="right-menu-list clearfix">
                                    <li><a href="">旅行</a></li>
                                    <li><a href="">摄影</a></li>
                                    <li><a href="">影视</a></li>
                                    <li><a href="">Lorem.</a></li>
                                    <li><a href="">Cumque.</a></li>
                                    <li><a href="">Velit.</a></li>
                                    <li><a href="">Perspiciatis?</a></li>
                                    <li><a href="">Eos.</a></li>
                                    <li><a href="">Quidem.</a></li>
                                    <li><a href="">Assumenda.</a></li>
                                    <li><a href="">Soluta.</a></li>
                                    <li><a href="">Voluptate?</a></li>
                                    <li><a href="">Alias.</a></li>
                                </ul>
                            </div>
                            <div class="group">
                                <div class="group-name">
                                    <a href="">兴趣</a>
                                </div>
                                <ul class="right-menu-list clearfix">
                                    <li><a href="">旅行</a></li>
                                    <li><a href="">摄影</a></li>
                                    <li><a href="">影视</a></li>
                                    <li><a href="">Lorem.</a></li>
                                    <li><a href="">Cumque.</a></li>
                                    <li><a href="">Velit.</a></li>
                                    <li><a href="">Perspiciatis?</a></li>
                                    <li><a href="">Eos.</a></li>
                                    <li><a href="">Quidem.</a></li>
                                    <li><a href="">Assumenda.</a></li>
                                    <li><a href="">Soluta.</a></li>
                                    <li><a href="">Voluptate?</a></li>
                                    <li><a href="">Alias.</a></li>
                                </ul>
                            </div>
                            <div class="group">
                                <div class="group-name">
                                    <a href="">兴趣</a>
                                </div>
                                <ul class="right-menu-list clearfix">
                                    <li><a href="">旅行</a></li>
                                    <li><a href="">摄影</a></li>
                                    <li><a href="">影视</a></li>
                                    <li><a href="">Lorem.</a></li>
                                    <li><a href="">Cumque.</a></li>
                                    <li><a href="">Velit.</a></li>
                                    <li><a href="">Perspiciatis?</a></li>
                                    <li><a href="">Eos.</a></li>
                                    <li><a href="">Quidem.</a></li>
                                    <li><a href="">Assumenda.</a></li>
                                    <li><a href="">Soluta.</a></li>
                                    <li><a href="">Voluptate?</a></li>
                                    <li><a href="">Alias.</a></li>
                                </ul>
                            </div>
                        </div>

                        <div class="main">
                            <div class="section-title">
                                <h2 class="title">热门小组</h2>
                                <span class="link">
                            <a href="">
                                更多
                            </a>
                        </span>
                            </div>

                            <ul class="item-list">
                                <li>
                                    <div class="img">
                                        <a href="">
                                            <img src="img/cover6.webp" alt="">
                                        </a>
                                    </div>
                                    <div class="words">
                                        <a href="">帮帮组™加入这个组就有人帮你了！</a>
                                        <span>
                                    16265 个成员
                                </span>
                                    </div>
                                </li>
                                <li>
                                    <div class="img">
                                        <a href="">
                                            <img src="img/cover6.webp" alt="">
                                        </a>
                                    </div>
                                    <div class="words">
                                        <a href="">帮帮组™加入这个组就有人帮你了！</a>
                                        <span>
                                    16265 个成员
                                </span>
                                    </div>
                                </li>
                                <li>
                                    <div class="img">
                                        <a href="">
                                            <img src="img/cover6.webp" alt="">
                                        </a>
                                    </div>
                                    <div class="words">
                                        <a href="">帮帮组™加入这个组就有人帮你了！</a>
                                        <span>
                                    16265 个成员
                                </span>
                                    </div>
                                </li>
                                <li>
                                    <div class="img">
                                        <a href="">
                                            <img src="img/cover6.webp" alt="">
                                        </a>
                                    </div>
                                    <div class="words">
                                        <a href="">帮帮组™加入这个组就有人帮你了！</a>
                                        <span>
                                    16265 个成员
                                </span>
                                    </div>
                                </li>
                                <li>
                                    <div class="img">
                                        <a href="">
                                            <img src="img/cover6.webp" alt="">
                                        </a>
                                    </div>
                                    <div class="words">
                                        <a href="">帮帮组™加入这个组就有人帮你了！</a>
                                        <span>
                                    16265 个成员
                                </span>
                                    </div>
                                </li>
                                <li>
                                    <div class="img">
                                        <a href="">
                                            <img src="img/cover6.webp" alt="">
                                        </a>
                                    </div>
                                    <div class="words">
                                        <a href="">帮帮组™加入这个组就有人帮你了！</a>
                                        <span>
                                    16265 个成员
                                </span>
                                    </div>
                                </li>
                                <li>
                                    <div class="img">
                                        <a href="">
                                            <img src="img/cover6.webp" alt="">
                                        </a>
                                    </div>
                                    <div class="words">
                                        <a href="">帮帮组™加入这个组就有人帮你了！</a>
                                        <span>
                                    16265 个成员
                                </span>
                                    </div>
                                </li>
                                <li>
                                    <div class="img">
                                        <a href="">
                                            <img src="img/cover6.webp" alt="">
                                        </a>
                                    </div>
                                    <div class="words">
                                        <a href="">帮帮组™加入这个组就有人帮你了！</a>
                                        <span>
                                    16265 个成员
                                </span>
                                    </div>
                                </li>
                                <li>
                                    <div class="img">
                                        <a href="">
                                            <img src="img/cover6.webp" alt="">
                                        </a>
                                    </div>
                                    <div class="words">
                                        <a href="">帮帮组™加入这个组就有人帮你了！</a>
                                        <span>
                                    16265 个成员
                                </span>
                                    </div>
                                </li>
                                <li>
                                    <div class="img">
                                        <a href="">
                                            <img src="img/cover6.webp" alt="">
                                        </a>
                                    </div>
                                    <div class="words">
                                        <a href="">帮帮组™加入这个组就有人帮你了！</a>
                                        <span>
                                    16265 个成员
                                </span>
                                    </div>
                                </li>
                            </ul>
                        </div>
                    </div>
                </div>

                <!-- 图书 -->
                <div class="section">
                    <div class="container clearfix book-area">
                        <div class="aside-left">
                            <div class="title">
                                <h2>
                                    <a href="">读书</a>
                                </h2>
                            </div>

                            <nav class="left-menu">
                                <ul>
                                    <li><a href="">分类浏览</a></li>
                                    <li><a href="" class="new">阅读</a></li>
                                    <li><a href="">作者</a></li>
                                    <li><a href="">书评</a></li>
                                </ul>
                            </nav>

                            <div class="menu-adv">
                                <a href="">
                                    <span class="app-icon-1"></span>
                                </a>
                                <a href="">
                            豆瓣阅读
                        </a>
                            </div>
                        </div>

                        <div class="aside-right">
                            <div class="section-title">
                                <h2 class="title">热门标签</h2>
                                <span class="link">
                            <a href="">
                                更多
                            </a>
                        </span>
                            </div>

                            <div class="group">
                                <ul class="right-menu-list clearfix">
                                    <li><span>[文学]</span></li>
                                    <li><a href="">小说</a></li>
                                    <li><a href="">随笔</a></li>
                                    <li><a href="">日本文学</a></li>
                                    <li><a href="">Lorem.</a></li>
                                    <li><a href="">Cumque.</a></li>
                                    <li><a href="">Velit.</a></li>
                                    <li><a href="">Perspiciatis?</a></li>
                                    <li><a href="">Eos.</a></li>
                                    <li><a href="">Quidem.</a></li>
                                    <li><a href="">Assumenda.</a></li>
                                    <li><a href="">Soluta.</a></li>
                                    <li><a href="">Voluptate?</a></li>
                                    <li><a href="">Alias.</a></li>
                                </ul>
                            </div>
                            <div class="group">
                                <ul class="right-menu-list clearfix">
                                    <li><span>[文学]</span></li>
                                    <li><a href="">小说</a></li>
                                    <li><a href="">随笔</a></li>
                                    <li><a href="">日本文学</a></li>
                                    <li><a href="">Lorem.</a></li>
                                    <li><a href="">Cumque.</a></li>
                                    <li><a href="">Velit.</a></li>
                                    <li><a href="">Perspiciatis?</a></li>
                                    <li><a href="">Eos.</a></li>
                                    <li><a href="">Quidem.</a></li>
                                    <li><a href="">Assumenda.</a></li>
                                    <li><a href="">Soluta.</a></li>
                                    <li><a href="">Voluptate?</a></li>
                                    <li><a href="">Alias.</a></li>
                                </ul>
                            </div>
                            <div class="group">
                                <ul class="right-menu-list clearfix">
                                    <li><span>[文学]</span></li>
                                    <li><a href="">小说</a></li>
                                    <li><a href="">随笔</a></li>
                                    <li><a href="">日本文学</a></li>
                                    <li><a href="">Lorem.</a></li>
                                    <li><a href="">Cumque.</a></li>
                                    <li><a href="">Velit.</a></li>
                                    <li><a href="">Perspiciatis?</a></li>
                                    <li><a href="">Eos.</a></li>
                                    <li><a href="">Quidem.</a></li>
                                    <li><a href="">Assumenda.</a></li>
                                    <li><a href="">Soluta.</a></li>
                                    <li><a href="">Voluptate?</a></li>
                                    <li><a href="">Alias.</a></li>
                                </ul>
                            </div>
                            <div class="group">
                                <ul class="right-menu-list clearfix">
                                    <li><span>[文学]</span></li>
                                    <li><a href="">小说</a></li>
                                    <li><a href="">随笔</a></li>
                                    <li><a href="">日本文学</a></li>
                                    <li><a href="">Lorem.</a></li>
                                    <li><a href="">Cumque.</a></li>
                                    <li><a href="">Velit.</a></li>
                                    <li><a href="">Perspiciatis?</a></li>
                                    <li><a href="">Eos.</a></li>
                                    <li><a href="">Quidem.</a></li>
                                    <li><a href="">Assumenda.</a></li>
                                    <li><a href="">Soluta.</a></li>
                                    <li><a href="">Voluptate?</a></li>
                                    <li><a href="">Alias.</a></li>
                                </ul>
                            </div>
                        </div>

                        <div class="main">
                            <div class="section-title">
                                <h2 class="title">新书速递</h2>
                                <span class="link">
                            <a href="">
                                更多
                            </a>
                        </span>
                            </div>
                            <ul class="item-list">
                                <li>
                                    <div class="img">
                                        <a href="">
                                            <img src="img/cover7.jpg" alt="">
                                        </a>
                                    </div>
                                    <div class="words">
                                        <a href="">
                                    镀金时代
                                </a>
                                        <span>
                                    夏清影
                                </span>
                                    </div>
                                    <div class="func">
                                        <a href="" class="block-link">免费试读</a>
                                    </div>
                                </li>
                                <li>
                                    <div class="img">
                                        <a href="">
                                            <img src="img/cover7.jpg" alt="">
                                        </a>
                                    </div>
                                    <div class="words">
                                        <a href="">
                                    镀金时代
                                </a>
                                        <span>
                                    夏清影
                                </span>
                                    </div>
                                    <div class="func">
                                        <a href="" class="block-link">免费试读</a>
                                    </div>
                                </li>
                                <li>
                                    <div class="img">
                                        <a href="">
                                            <img src="img/cover7.jpg" alt="">
                                        </a>
                                    </div>
                                    <div class="words">
                                        <a href="">
                                    镀金时代
                                </a>
                                        <span>
                                    夏清影
                                </span>
                                    </div>
                                    <div class="func">
                                        <a href="" class="block-link">免费试读</a>
                                    </div>
                                </li>
                                <li>
                                    <div class="img">
                                        <a href="">
                                            <img src="img/cover7.jpg" alt="">
                                        </a>
                                    </div>
                                    <div class="words">
                                        <a href="">
                                    镀金时代
                                </a>
                                        <span>
                                    夏清影
                                </span>
                                    </div>
                                    <div class="func">
                                        <a href="" class="block-link">免费试读</a>
                                    </div>
                                </li>
                            </ul>

                            <div class="section-title">
                                <h2 class="title">原创数字作品</h2>
                                <span class="link">
                            <a href="">
                                更多
                            </a>
                        </span>
                            </div>
                            <ul class="item-list">
                                <li>
                                    <div class="img">
                                        <a href="">
                                            <img src="img/cover7.jpg" alt="">
                                        </a>
                                    </div>
                                    <div class="words">
                                        <a href="">
                                    镀金时代
                                </a>
                                        <span>
                                    夏清影
                                </span>
                                    </div>
                                    <div class="func">
                                        <a href="" class="block-link">免费试读</a>
                                    </div>
                                </li>
                                <li>
                                    <div class="img">
                                        <a href="">
                                            <img src="img/cover7.jpg" alt="">
                                        </a>
                                    </div>
                                    <div class="words">
                                        <a href="">
                                    镀金时代
                                </a>
                                        <span>
                                    夏清影
                                </span>
                                    </div>
                                    <div class="func">
                                        <a href="" class="block-link">免费试读</a>
                                    </div>
                                </li>
                                <li>
                                    <div class="img">
                                        <a href="">
                                            <img src="img/cover7.jpg" alt="">
                                        </a>
                                    </div>
                                    <div class="words">
                                        <a href="">
                                    镀金时代
                                </a>
                                        <span>
                                    夏清影
                                </span>
                                    </div>
                                    <div class="func">
                                        <a href="" class="block-link">免费试读</a>
                                    </div>
                                </li>
                                <li>
                                    <div class="img">
                                        <a href="">
                                            <img src="img/cover7.jpg" alt="">
                                        </a>
                                    </div>
                                    <div class="words">
                                        <a href="">
                                    镀金时代
                                </a>
                                        <span>
                                    夏清影
                                </span>
                                    </div>
                                    <div class="func">
                                        <a href="" class="block-link">免费试读</a>
                                    </div>
                                </li>
                            </ul>
                        </div>
                    </div>
                </div>

                <!-- 音乐 -->
                <div class="section">
                    <div class="container clearfix music-area">
                        <div class="aside-left">
                            <div class="title">
                                <h2>
                                    <a href="">音乐</a>
                                </h2>
                            </div>

                            <nav class="left-menu">
                                <ul>
                                    <li><a href="">音乐人</a></li>
                                    <li><a href="" class="new">专题</a></li>
                                    <li><a href="">排行榜</a></li>
                                    <li><a href="">Lorem.</a></li>
                                    <li><a href="">Similique.</a></li>
                                    <li><a href="">Repellendus.</a></li>
                                    <li><a href="">Excepturi!</a></li>
                                    <li><a href="">Illum?</a></li>
                                    <li><a href="">In.</a></li>
                                    <li><a href="">Eaque.</a></li>
                                    <li><a href="">Dicta.</a></li>
                                    <li><a href="">Cum.</a></li>
                                    <li><a href="">Cumque?</a></li>
                                </ul>
                            </nav>

                            <div class="menu-adv">
                                <a href="">
                                    <span class="app-icon-2"></span>
                                </a>
                                <a href="">
                            豆瓣FM
                        </a>
                            </div>
                            <div class="menu-adv">
                                <a href="">
                                    <span class="app-icon-3"></span>
                                </a>
                                <a href="">
                            豆瓣音乐人
                        </a>
                            </div>
                        </div>
                        <div class="aside-right">
                            <div class="section-title">
                                <h2 class="title">本周流行音乐人</h2>
                                <span class="link">
                            <a href="">
                                更多
                            </a>
                        </span>
                            </div>

                            <ul class="music-player-list">
                                <li class="clearfix">
                                    <span class="number left">1.</span>
                                    <div class="player right">
                                        <a href="">
                                            <div class="img left iconbofang1 iconfont">
                                                <img src="img/cover8.jpg" alt="">
                                            </div>
                                        </a>
                                        <div class="words left">
                                            <a href="">王敖（音乐人）</a>
                                            <span>流派: 世界音乐 World </span>
                                            <span>463人关注</span>
                                        </div>
                                    </div>
                                </li>
                                <li class="clearfix">
                                    <span class="number left">1.</span>
                                    <div class="player right">
                                        <a href="">
                                            <div class="img left iconbofang1 iconfont">
                                                <img src="img/cover8.jpg" alt="">
                                            </div>
                                        </a>
                                        <div class="words left">
                                            <a href="">王敖（音乐人）</a>
                                            <span>流派: 世界音乐 World </span>
                                            <span>463人关注</span>
                                        </div>
                                    </div>
                                </li>
                                <li class="clearfix">
                                    <span class="number left">1.</span>
                                    <div class="player right">
                                        <a href="">
                                            <div class="img left iconbofang1 iconfont">
                                                <img src="img/cover8.jpg" alt="">
                                            </div>
                                        </a>
                                        <div class="words left">
                                            <a href="">王敖（音乐人）</a>
                                            <span>流派: 世界音乐 World </span>
                                            <span>463人关注</span>
                                        </div>
                                    </div>
                                </li>
                                <li class="clearfix">
                                    <span class="number left">1.</span>
                                    <div class="player right">
                                        <a href="">
                                            <div class="img left iconbofang1 iconfont">
                                                <img src="img/cover8.jpg" alt="">
                                            </div>
                                        </a>
                                        <div class="words left">
                                            <a href="">王敖（音乐人）</a>
                                            <span>流派: 世界音乐 World </span>
                                            <span>463人关注</span>
                                        </div>
                                    </div>
                                </li>
                                <li class="clearfix">
                                    <span class="number left">1.</span>
                                    <div class="player right">
                                        <a href="">
                                            <div class="img left iconbofang1 iconfont">
                                                <img src="img/cover8.jpg" alt="">
                                            </div>
                                        </a>
                                        <div class="words left">
                                            <a href="">王敖（音乐人）</a>
                                            <span>流派: 世界音乐 World </span>
                                            <span>463人关注</span>
                                        </div>
                                    </div>
                                </li>
                                <li class="clearfix">
                                    <span class="number left">1.</span>
                                    <div class="player right">
                                        <a href="">
                                            <div class="img left iconbofang1 iconfont">
                                                <img src="img/cover8.jpg" alt="">
                                            </div>
                                        </a>
                                        <div class="words left">
                                            <a href="">王敖（音乐人）</a>
                                            <span>流派: 世界音乐 World </span>
                                            <span>463人关注</span>
                                        </div>
                                    </div>
                                </li>
                                <li class="clearfix">
                                    <span class="number left">1.</span>
                                    <div class="player right">
                                        <a href="">
                                            <div class="img left iconbofang1 iconfont">
                                                <img src="img/cover8.jpg" alt="">
                                            </div>
                                        </a>
                                        <div class="words left">
                                            <a href="">王敖（音乐人）</a>
                                            <span>流派: 世界音乐 World </span>
                                            <span>463人关注</span>
                                        </div>
                                    </div>
                                </li>
                            </ul>
                        </div>
                        <div class="main">
                            <div class="section-title">
                                <h2 class="title">豆瓣新碟榜</h2>
                                <span class="link">
                            <a href="">
                                更多
                            </a>
                        </span>
                            </div>
                            <ul class="item-list">
                                <li>
                                    <div class="img">
                                        <a href=""><img src="img/cover9.jpg" alt=""></a>
                                    </div>
                                    <div class="words">
                                        1. <a href="">我好嗎？－太陽如常升起 (預購版)</a>
                                    </div>
                                    <div class="words">
                                        <a href="">梁静茹</a>
                                    </div>
                                    <div class="star">
                                        <span class="star-bg star50"></span>
                                        <span class="number">
                                    8.9
                                </span>
                                    </div>
                                </li>
                                <li>
                                    <div class="img">
                                        <a href=""><img src="img/cover9.jpg" alt=""></a>
                                    </div>
                                    <div class="words">
                                        1. <a href="">我好嗎？－太陽如常升起 (預購版)</a>
                                    </div>
                                    <div class="words">
                                        <a href="">梁静茹</a>
                                    </div>
                                    <div class="star">
                                        <span class="star-bg star50"></span>
                                        <span class="number">
                                    8.9
                                </span>
                                    </div>
                                </li>
                                <li>
                                    <div class="img">
                                        <a href=""><img src="img/cover9.jpg" alt=""></a>
                                    </div>
                                    <div class="words">
                                        1. <a href="">我好嗎？－太陽如常升起 (預購版)</a>
                                    </div>
                                    <div class="words">
                                        <a href="">梁静茹</a>
                                    </div>
                                    <div class="star">
                                        <span class="star-bg star50"></span>
                                        <span class="number">
                                    8.9
                                </span>
                                    </div>
                                </li>
                                <li>
                                    <div class="img">
                                        <a href=""><img src="img/cover9.jpg" alt=""></a>
                                    </div>
                                    <div class="words">
                                        1. <a href="">我好嗎？－太陽如常升起 (預購版)</a>
                                    </div>
                                    <div class="words">
                                        <a href="">梁静茹</a>
                                    </div>
                                    <div class="star">
                                        <span class="star-bg star50"></span>
                                        <span class="number">
                                    8.9
                                </span>
                                    </div>
                                </li>
                                <li>
                                    <div class="img">
                                        <a href=""><img src="img/cover9.jpg" alt=""></a>
                                    </div>
                                    <div class="words">
                                        1. <a href="">我好嗎？－太陽如常升起 (預購版)</a>
                                    </div>
                                    <div class="words">
                                        <a href="">梁静茹</a>
                                    </div>
                                    <div class="star">
                                        <span class="star-bg star50"></span>
                                        <span class="number">
                                    8.9
                                </span>
                                    </div>
                                </li>
                                <li>
                                    <div class="img">
                                        <a href=""><img src="img/cover9.jpg" alt=""></a>
                                    </div>
                                    <div class="words">
                                        1. <a href="">我好嗎？－太陽如常升起 (預購版)</a>
                                    </div>
                                    <div class="words">
                                        <a href="">梁静茹</a>
                                    </div>
                                    <div class="star">
                                        <span class="star-bg star50"></span>
                                        <span class="number">
                                    8.9
                                </span>
                                    </div>
                                </li>
                                <li>
                                    <div class="img">
                                        <a href=""><img src="img/cover9.jpg" alt=""></a>
                                    </div>
                                    <div class="words">
                                        1. <a href="">我好嗎？－太陽如常升起 (預購版)</a>
                                    </div>
                                    <div class="words">
                                        <a href="">梁静茹</a>
                                    </div>
                                    <div class="star">
                                        <span class="star-bg star50"></span>
                                        <span class="number">
                                    8.9
                                </span>
                                    </div>
                                </li>
                                <li>
                                    <div class="img">
                                        <a href=""><img src="img/cover9.jpg" alt=""></a>
                                    </div>
                                    <div class="words">
                                        1. <a href="">我好嗎？－太陽如常升起 (預購版)</a>
                                    </div>
                                    <div class="words">
                                        <a href="">梁静茹</a>
                                    </div>
                                    <div class="star">
                                        <span class="star-bg star50"></span>
                                        <span class="number">
                                    8.9
                                </span>
                                    </div>
                                </li>
                            </ul>
                            <div class="section-title">
                                <h2 class="title">热门歌单</h2>
                                <span class="link">
                            <a href="">
                                更多
                            </a>
                        </span>
                            </div>
                            <ul class="item-list hot-music">
                                <li>
                                    <a href="">
                                        <div class="img iconfont iconbofang">
                                            <img src="img/cover10.jpg" alt="">
                                        </div>
                                    </a>
                                    <div class="words">
                                        LM-6.2014
                                    </div>
                                </li>
                                <li>
                                    <a href="">
                                        <div class="img iconfont iconbofang">
                                            <img src="img/cover10.jpg" alt="">
                                        </div>
                                    </a>
                                    <div class="words">
                                        LM-6.2014
                                    </div>
                                </li>
                                <li>
                                    <a href="">
                                        <div class="img iconfont iconbofang">
                                            <img src="img/cover10.jpg" alt="">
                                        </div>
                                    </a>
                                    <div class="words">
                                        LM-6.2014
                                    </div>
                                </li>
                                <li>
                                    <a href="">
                                        <div class="img iconfont iconbofang">
                                            <img src="img/cover10.jpg" alt="">
                                        </div>
                                    </a>
                                    <div class="words">
                                        LM-6.2014
                                    </div>
                                </li>
                                <li>
                                    <a href="">
                                        <div class="img iconfont iconbofang">
                                            <img src="img/cover10.jpg" alt="">
                                        </div>
                                    </a>
                                    <div class="words">
                                        LM-6.2014
                                    </div>
                                </li>
                                <li>
                                    <a href="">
                                        <div class="img iconfont iconbofang">
                                            <img src="img/cover10.jpg" alt="">
                                        </div>
                                    </a>
                                    <div class="words">
                                        LM-6.2014
                                    </div>
                                </li>
                            </ul>
                        </div>
                    </div>
                </div>

                <!-- 豆品 -->
                <div class="section">
                    <div class="container clearfix doupin-area">
                        <div class="aside-left">
                            <div class="title">
                                <h2>
                                    <a href="">豆品</a>
                                </h2>
                            </div>
                        </div>
                        <div class="aside-right">
                            <div class="section-title">
                                <h2 class="title">热门活动</h2>
                            </div>
                            <div class="adv">
                                <a href="">
                                    <img src="./img/adv2.jpg" alt="">
                                </a>
                            </div>
                            <div>
                                <a href="">我的豆瓣收藏夹里有什么</a>
                            </div>
                            <div class="section-title">
                                <h2 class="title">官方小组</h2>
                                <span class="link">
                            <a href="">
                                更多
                            </a>
                        </span>
                            </div>
                        </div>
                        <div class="main">
                            <div class="section-title">
                                <h2 class="title">热卖商品</h2>
                                <span class="link">
                            <a href="">
                                更多
                            </a>
                        </span>
                            </div>
                            <ul class="item-list">
                                <li>
                                    <div class="img">
                                        <a href=""><img src="img/cover11.jpg" alt=""></a>
                                    </div>
                                    <div class="words clearfix">
                                        <a href="" class="left">豆瓣冻顶乌龙茶</a>
                                        <span class="right">￥59.00</span>
                                    </div>
                                </li>
                                <li>
                                    <div class="img">
                                        <a href=""><img src="img/cover11.jpg" alt=""></a>
                                    </div>
                                    <div class="words clearfix">
                                        <a href="" class="left">豆瓣冻顶乌龙茶</a>
                                        <span class="right">￥59.00</span>
                                    </div>
                                </li>
                                <li>
                                    <div class="img">
                                        <a href=""><img src="img/cover11.jpg" alt=""></a>
                                    </div>
                                    <div class="words clearfix">
                                        <a href="" class="left">豆瓣冻顶乌龙茶</a>
                                        <span class="right">￥59.00</span>
                                    </div>
                                </li>
                                <li>
                                    <div class="img">
                                        <a href=""><img src="img/cover11.jpg" alt=""></a>
                                    </div>
                                    <div class="words clearfix">
                                        <a href="" class="left">豆瓣冻顶乌龙茶</a>
                                        <span class="right">￥59.00</span>
                                    </div>
                                </li>
                            </ul>
                        </div>
                    </div>
                </div>

                <!-- 同城 -->
                <div class="section">
                    <div class="container clearfix city-area">
                        <div class="aside-left">
                            <div class="title">
                                <h2>
                                    <a href="">同城</a>
                                </h2>
                            </div>

                            <nav class="left-menu">
                                <ul>
                                    <li><a href="">近期活动</a></li>
                                    <li><a href="" class="new">主办方</a></li>
                                    <li><a href="">舞台剧</a></li>
                                </ul>
                            </nav>

                        </div>
                        <div class="aside-right">
                            <div class="section-title">
                                <h2 class="title">活动标签</h2>
                            </div>

                            <div class="group">
                                <div class="group-name">
                                    <a href="">音乐</a>
                                </div>
                                <ul class="right-menu-list clearfix">
                                    <li><a href="">Lorem.</a></li>
                                    <li><a href="">Cumque.</a></li>
                                    <li><a href="">Velit.</a></li>
                                    <li><a href="">Perspiciatis?</a></li>
                                    <li><a href="">Eos.</a></li>
                                    <li><a href="">Quidem.</a></li>
                                    <li><a href="">Assumenda.</a></li>
                                    <li><a href="">Soluta.</a></li>
                                    <li><a href="">Voluptate?</a></li>
                                    <li><a href="">Alias.</a></li>
                                </ul>
                            </div>
                            <div class="group">
                                <div class="group-name">
                                    <a href="">音乐</a>
                                </div>
                                <ul class="right-menu-list clearfix">
                                    <li><a href="">Lorem.</a></li>
                                    <li><a href="">Cumque.</a></li>
                                    <li><a href="">Velit.</a></li>
                                    <li><a href="">Perspiciatis?</a></li>
                                    <li><a href="">Eos.</a></li>
                                    <li><a href="">Quidem.</a></li>
                                    <li><a href="">Assumenda.</a></li>
                                    <li><a href="">Soluta.</a></li>
                                    <li><a href="">Voluptate?</a></li>
                                    <li><a href="">Alias.</a></li>
                                </ul>
                            </div>
                            <div class="group">
                                <div class="group-name">
                                    <a href="">音乐</a>
                                </div>
                                <ul class="right-menu-list clearfix">
                                    <li><a href="">Lorem.</a></li>
                                    <li><a href="">Cumque.</a></li>
                                    <li><a href="">Velit.</a></li>
                                    <li><a href="">Perspiciatis?</a></li>
                                    <li><a href="">Eos.</a></li>
                                    <li><a href="">Quidem.</a></li>
                                    <li><a href="">Assumenda.</a></li>
                                    <li><a href="">Soluta.</a></li>
                                    <li><a href="">Voluptate?</a></li>
                                    <li><a href="">Alias.</a></li>
                                </ul>
                            </div>
                            <div class="group">
                                <div class="group-name">
                                    <a href="">音乐</a>
                                </div>
                                <ul class="right-menu-list clearfix">
                                    <li><a href="">Lorem.</a></li>
                                    <li><a href="">Cumque.</a></li>
                                    <li><a href="">Velit.</a></li>
                                    <li><a href="">Perspiciatis?</a></li>
                                    <li><a href="">Eos.</a></li>
                                    <li><a href="">Quidem.</a></li>
                                    <li><a href="">Assumenda.</a></li>
                                    <li><a href="">Soluta.</a></li>
                                    <li><a href="">Voluptate?</a></li>
                                    <li><a href="">Alias.</a></li>
                                </ul>
                            </div>
                        </div>
                        <div class="main">
                            <div class="section-title">
                                <h2 class="title">成都 · 本周热门活动</h2>
                                <span class="link">
                            <a href="">
                                更多
                            </a>
                        </span>
                            </div>

                            <ul class="item-list">
                                <li class="clearfix">
                                    <div class="img left">
                                        <a href=""><img src="img/cover12.jpg" alt=""></a>
                                    </div>
                                    <div class="words">
                                        <a href="">苏菲珊曼妮成都演唱会</a>
                                        <span>5月31日 周五 19:30 - 21:30</span>
                                        <span>特仑苏音乐厅 成都市锦江区...</span>
                                        <span>80人关注</span>
                                    </div>
                                </li>
                                <li class="clearfix">
                                    <div class="img left">
                                        <a href=""><img src="img/cover12.jpg" alt=""></a>
                                    </div>
                                    <div class="words">
                                        <a href="">苏菲珊曼妮成都演唱会</a>
                                        <span>5月31日 周五 19:30 - 21:30</span>
                                        <span>特仑苏音乐厅 成都市锦江区...</span>
                                        <span>80人关注</span>
                                    </div>
                                </li>
                                <li class="clearfix">
                                    <div class="img left">
                                        <a href=""><img src="img/cover12.jpg" alt=""></a>
                                    </div>
                                    <div class="words">
                                        <a href="">苏菲珊曼妮成都演唱会</a>
                                        <span>5月31日 周五 19:30 - 21:30</span>
                                        <span>特仑苏音乐厅 成都市锦江区...</span>
                                        <span>80人关注</span>
                                    </div>
                                </li>
                                <li class="clearfix">
                                    <div class="img left">
                                        <a href=""><img src="img/cover12.jpg" alt=""></a>
                                    </div>
                                    <div class="words">
                                        <a href="">苏菲珊曼妮成都演唱会</a>
                                        <span>5月31日 周五 19:30 - 21:30</span>
                                        <span>特仑苏音乐厅 成都市锦江区...</span>
                                        <span>80人关注</span>
                                    </div>
                                </li>
                            </ul>
                        </div>
                    </div>
                </div>
            </div>

            <footer class="footer">
                <div class="container clearfix">
                    <div class="left">
                        <p>© 2005－2021 littleA.com, all rights reserved 小A科技有限公司</p>
                        <p><a href="">京ICP证090015号</a> 京ICP备11027288号 网络视听许可证<a href="">0110418</a>号 </p>
                        <p>
                            京网文[2015]2026-368号 <img src="img/biaoshi.gif" alt=""> <a href="">京公网安备11010502000728</a> 新出网证(京)字129号
                        </p>
                        <p>
                            违法和不良信息举报电话：4008353331-9
                        </p>
                        <p>
                            <img src="img/jubao.png" alt=""> <a href="">中国互联网举报中心</a> 电话：12377 <a href="">新出发京批字第直160029号</a>
                        </p>
                    </div>
                    <div class="right">
                        <nav class="menu">
                            <a href="">关于小A</a> ·
                            <a href="">在小A工作</a> ·
                            <a href="">联系我们</a> ·
                            <a href="">法律声明</a> ·
                            <a href="">帮助中心</a> ·
                            <a href="">移动应用</a> ·
                            <a href="">小A广告</a>
                        </nav>
                        <div class="adv">
                            <a href="">
                                <img src="img/adv3.jpg" alt="">
                            </a>
                        </div>
                    </div>
                </div>
            </footer>
        </div>
    </div>
    <script>
        var login = document.querySelector('.logging');
        var mask = document.querySelector('.wrapper');
        var link = document.querySelector('.loginbtn');
        var back = document.querySelector('.back');
        var content = document.querySelector('.content');
        var smallbox = document.querySelector('.smallbox');
        var closebtn = document.querySelector('.closebtn1');
        var closebtn1 = document.querySelector('#closebtn2');
        link.addEventListener('click', function() {
            login.style.display = 'block';
            mask.style.display = 'block';

        })
        closebtn.addEventListener('click', function() {
            login.style.display = 'none';
            mask.style.display = 'none';

        })
        closebtn1.addEventListener('click', function() {
            login.style.display = 'none';
            mask.style.display = 'none';

        })
        back.addEventListener('click', function() {
            content.style.display = 'none';
            smallbox.style.display = 'block';


        })
    </script>
</body>

</html>